<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/alllayui/layui/css/layui.css}"  media="all">
    <script th:src="@{/alllayui/layui/layui.js}" charset="utf-8"></script>
    <script th:src="@{/system/js/jquery.min.js}" charset="utf-8"></script>
<style>
.layui-upload-img { width: 90px; height: 90px; margin: 0; }
.pic-more { width:100%; left; margin: 10px 0px 0px 0px;}
.pic-more li { width:90px; float: left; margin-right: 5px;}
.pic-more li .layui-input { display: initial; }
.pic-more li a { position: absolute; top: 0; display: block; }
.pic-more li a i { font-size: 24px; background-color: #008800; }
#slide-pc-priview .item_img img{ width: 90px; height: 90px;}
#slide-pc-priview li{position: relative;}
#slide-pc-priview li .operate{ color: #000; display: none;}
#slide-pc-priview li .toleft{ position: absolute;top: 40px; left: 1px; cursor:pointer;font-size: 16px;color: #F08080;}
#slide-pc-priview li .toright{ position: absolute;top: 40px; right: 1px;cursor:pointer;font-size: 16px;color: #F08080;}
#slide-pc-priview li .close{position: absolute;top: 5px; right: 5px;cursor:pointer;}
#slide-pc-priview li:hover .operate{ display: block;}
</style>
</head>
<body>
 
 
   <div class="layui-form-item" id="pics">
  <div class="layui-form-label">相册图集</div>
  <div class="layui-input-block" style="width: 70%;">
    <div class="layui-upload">
      <button type="button" class="layui-btn layui-btn-primary pull-left" id="slide-pc">选择多图</button>
      <div class="pic-more">
        <ul class="pic-more-upload-list" id="slide-pc-priview">
        </ul>
      </div>
       <hr>
      <button type="button" id="comfirmBtn" class="layui-btn">确定</button>
    </div>
  </div>
</div>
   
<script>
         layui.use('upload', function(){
           var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
           var $ = layui.jquery;
           var upload = layui.upload;
           
           $("#comfirmBtn").click(function(){
        	    
        	   if($(".uploadPics").size()==6){
        		   var uploadPics = [];
        		   $(".uploadPics").each(function(index,element){
        			   uploadPics.push($(element).val());
        		   });
        		   parent.setUploadPicArr(uploadPics); 
        		   parent.layer.close(index);
        	   }else{
        		   layer.msg('需要6张图片');
        	   }
           });
           
           upload.render({
             elem: '#slide-pc',
             url: "/orgnews/uploadPic",
                   size: 1024*2,
                   exts: 'jpg|png|jpeg',
                   multiple: true,
                   field:'uploadFile',
                   before: function(obj) {
                   layer.msg('图片上传中...', {
                     icon: 16,
                     shade: 0,
                     time: 5000
                   })
           },
           done: function(res) {
             layer.close(layer.msg());//关闭上传提示窗口
             if(res.status == 0) {
               return layer.msg(res.message);
             }
            
             $('#slide-pc-priview').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon">&lt;&lt; </i> <i class="toright layui-icon">&gt;&gt; </i><i  class="close layui-icon"><img style="height: 32px;width: 32px;" src="/system/images/del.png"></i></div><img src="' + res.file_path + '" class="img" ><input type="hidden"  class="uploadPics" name="pc_src[]" value="' + res.file_path + '" /></li>');
           }
         });
         });
         //点击多图上传的X,删除当前的图片
         $("body").on("click",".close",function(){
           $(this).closest("li").remove();
         });
         //多图上传点击<>左右移动图片
         $("body").on("click",".pic-more ul li .toleft",function(){
           var li_index=$(this).closest("li").index();
           if(li_index>=1){
             $(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));
           }
         });
         $("body").on("click",".pic-more ul li .toright",function(){
           var li_index=$(this).closest("li").index();
           $(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));
         });
</script>
 
</body>
</html>